<template>
    <div class="hotgoods">
        <h3>人气推荐</h3>
        <ul>
            <li v-for="item in hotGoodsList" :key="item.id">
                <img v-lazy="item.list_pic_url" alt="">
                <div @click="btn(item.id)">
                    <p>{{item.name}}</p>
                    <span>{{item.goods_brief}}</span>
                    <i>{{item.retail_price|Price}}</i>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'VueIntroduce',

    data() {
        return {
            
        };
    },
    props:['hotGoodsList'],

    mounted() {
        
    },

    methods: {
        btn(id){
        console.log(id)
        this.$router.push({path:'/detail',query:{id}})
      }
    },
};
</script>

<style lang="less" scoped>
.hotgoods{
    h3{
        text-align: center;
        margin-top: 50px;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            display: flex;
            width: 100%;
            background:rgb(245, 243, 243) ;
            margin: 10px 0;
            img{
                width: 150px;
                height: 110px;
            }
            div{
                display: flex;
                flex-direction: column;
                p{
                    font-size: 19px;
                    margin-top: 15px ;
                }
                span{
                    padding-top: 20px;
                    font-size: 14px;
                }
                i{
                    font-size: 12px;
                    padding-top: 20px;
                    color: rgb(129, 35, 35);
                }
            }
        }
    }
}
</style>